<script setup lang="ts">

import {
    NDataTable, NButton, NPagination, NCard,
    type DataTableColumns,
    type DataTableRowKey
} from 'naive-ui';
import { type RowData } from 'naive-ui/es/data-table/src/interface';
import { ref, defineProps, defineEmits, type PropType, reactive } from 'vue';

import { useFeature } from "~/common/mixins/";
let { LoadData, Pagination } = useFeature()

import { useFunction } from "~/utils/function";
let { treeifyBin } = useFunction();

defineProps({
    title: {
        type: String,
        default: ""
    },
    columns: {
        type: Array as PropType<DataTableColumns<RowData>>,
        default: () => [] as DataTableColumns<RowData>
    }
})

let state = reactive({
    data: ref<DataTableColumns<RowData>>(),
    total: ref<number>(0)
})

let emits = defineEmits(["onShow", "onLoad", "onHandleCheck", "emitData"])
let rowkey = ref((row: RowData) => row.fdId);

let _submit = () => {
    emits("onShow", "table");
}

import { useState } from '~/common/mixins/';
let { Conditions } = useState();
let param = {
    pageNo: Conditions.pageNo + 1,
    pageSize: Conditions.pageSize
}


const expandedRowKeys = ref<string[]>([])
let loading = ref(true)
let dataTableRef = ref()

emits('onLoad')

let changePage = (newPage: number) => {
    param.pageNo = newPage;
    emits('onLoad');
}

let handleCheck = (rowkeys: DataTableRowKey[]) => {
    emits('onHandleCheck', rowkeys)
}

let handleQuery = async (store: any) => {
    try {
        await LoadData(store, param);
        let ListData = Pagination.value.ListData;
        let t = 0;
        let datas = [];
        if (store == "") {
            datas = treeifyBin(ListData, 'table');
            expandedRowKeys.value = datas.map(item => item.fdId);
            console.log(expandedRowKeys);
            emits("emitData", treeifyBin(ListData, 'select'));
        } else {
            datas = ListData;
            t = Pagination.value.ListTotal;
        }
        state.data = datas;
        state.total = t;

        loading.value = false;
    } catch (e) {
        loading.value = false;
    }
}

defineExpose({ handleQuery })

</script>

<template>
    <n-card hoverable>
    <div class="table_area">
        <div class="toolbar">
            <n-button type="primary" @click="_submit">创建{{ title }}</n-button>
            <slot name="extra_btn"></slot>
        </div>

        <n-data-table ref="dataTableRef" :expanded-row-keys="expandedRowKeys" :loading="loading" size="small"
            :row-key="rowkey" :columns="columns" :data="state.data" @update:checked-row-keys="handleCheck" />

        <div class="pagination">
            <n-pagination v-on:update-page="changePage" v-model:page="param.pageNo" v-model:page-size="param.pageSize"
                :item-count="state.total" />
        </div>
    </div>
</n-card>
</template>

<style scoped>
.table_area {
    height: 100%;
}

.toolbar {
    padding: 10px 0 10px 10px;
    display: flex;

    .n-button {
        margin-right: 10px;
    }

    .extra_btn {
        .n-button {
            margin-right: 10px;
        }
    }
}

.pagination {
    padding: 10px;
}
</style>
